<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>商品列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!--<link rel="stylesheet" href="/css/goodsCss.css">-->
    <link rel="stylesheet" href="/css/admin.css">
    <link rel="stylesheet" href="/css/template.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!--菜单栏-->
    <div class="layui-side layui-bg-black" style="top: 0;">
        <div class="layui-side-scroll menu" style="height: 100% !important;">
        </div>
    </div>
    <!-- 内容主体区域 -->
    <div class="layui-body layui-fluid layadmin-cmdlist-fluid" style="top: 0;">
        <div class="layui-row layui-col-space30 goodsList"></div>
        <!--<div style="padding: 15px; float: left" class="goodsList"></div>-->
    </div>
</div>
<script src="/layui/layui.all.js"></script>
<script>
    layui.use(['element','layer'], function () {
        var element = layui.element;
        var $ = layui.jquery;
        var layer = layui.layer;
        //所有类型和商品
        var goodsAndType = null;
        var url = '/goods/getGoodsType';
        //商品类型初始化
        var goodsTypeInit = '<ul class="layui-nav layui-nav-tree layui-inline"  lay-filter="goodsType">' +
            '<li class="layui-nav-item layui-nav-itemed">\n' +
            '<a class="" href="javascript:;">商品类型</a>' +
            '<dl class="layui-nav-child">';
        var goodsType = goodsTypeInit;
        var goods = '';
        $.post(url, {}, function (data) {
            goodsAndType = data.data;
            loadGoodsType(data.data);
            loadGoods(data.data);
            clickGoods();
        }, 'json');

        /**
         * 加载所有商品类型和商品
         */
        function loadGoodsType(data) {
            var i = data.length;
            for (var d in data) {
                if (data[d].child != null) {
                    goodsType += loadMenuBefore(data[d].category_name)
                    goods += haveGoods(data[d])
                    loadGoodsType(data[d].child)
                }
                else {
                    goodsType += loadMenuChild(data[d].category_name)
                    if (0 == i--) {
                        goodsType += loadMenuAfter();
                    }
                }
            }
            goodsType += loadMenuAfter();
            $(".menu").html(goodsType);
            $(".goodsList").html(goods);
            layui.element.init();
        }

        /**
         * 加载菜单栏前半部分标签
         * @param menu
         * @returns {string}
         */
        function loadMenuBefore(menu) {
            return '<ul class="layui-nav layui-nav-tree goodsType "  lay-filter="goodsType">' +
                '<li class="layui-nav-item layui-nav-itemed">' +
                '<a class="" href="javascript:;">' + menu + '</a>' +
                '<dl class="layui-nav-child">'
        }

        /**
         * 加载菜单栏中间部分(没有下拉列表了)
         * @param menu
         * @returns {string}
         */
        function loadMenuChild(child) {
            return '<dd><a href="javascript:;" class="goodsType" lay-filter="goodsType">' + child + '</a></dd>'
        }

        /**
         * 加载菜单栏后半部分标签
         * @param menu
         * @returns {string}
         */
        function loadMenuAfter() {
            return '</dl></li></ul>'
        }

        /**
         * 判断是否有商品
         */
        function haveGoods(type) {
            var str = '';
            if (type.goods.length > 0) {
                for (var g in type.goods) {
                    str += loadGoods(type.goods[g])
                }
            }
            return str;
        }

        /**
         * 加载所有商品
         */
        function loadGoods(goods) {
            return '<div class="layui-col-md2 layui-col-sm4 goodsItem" lay-filter="goodsList"> ' +
                '<div class="cmdlist-container">' +
                '<a href="javascript:;">' +
                '<img src="' + goods.goods_image + '" alt="商品图片">' +
                '</a><a href="javascript:;">' +
                '<div class="cmdlist-text" lay-filter="goodsList">' +
                ' <p class="info goods_name">' + goods.goods_name + '</p>' +
                '<div class="">' +
                '<b class="goods_price">￥' + goods.goods_price + '</b>' +
                '<p>¥<del class="old_price">' + goods.old_price + '</del></p>' +
                //收藏
                '<span class="flow"> <i class=""></i>★' +
                goods.goods_collect + '</span>' +
                '<span class="flow goodsId" id="goodsId" name="id" style="opacity: 0">' + goods.id + '</span>' +
               /* '<span class="flow">'+
                '<input class="goodsId" id="goodsId" type="hidden" name="id" value="' + goods.id + '">' +*/
                '</span>' +
                '</div>' +
                '</div>' +
                '</a>' +
                '</div>' +
                '</div>'
        }

        var str = '';
        /**
         * 类型的点击事件
         */
        element.on('nav(goodsType)', function (type) {
            var type = type.text();
            goods = '';
            if (type == "商品类型") {
                goodsType = goodsTypeInit;
                loadGoodsType(goodsAndType);
                clickGoods();
                return;
            }
            for (var gad in goodsAndType) {
                if (goodsAndType[gad].category_name != type) {
                    continue;
                }
                goods += haveGoods(goodsAndType[gad]);
                if (goodsAndType[gad].child != null) {
                    str = '';
                    goods += loadTypeGoods(goodsAndType[gad].child)
                }
            }
            $(".goodsList").html(goods)
            clickGoods();
        });

        /**
         * 根据类型加载商品
         */
        function loadTypeGoods(childTypeList) {
            for (var ctl in childTypeList) {
                str += haveGoods(childTypeList[ctl]);
                if (childTypeList[ctl].child != null) {
                    loadTypeGoods(childTypeList[ctl].child)
                }
            }
            return str;
        }

        /**
         * 商品的点击事件
         */
        function clickGoods() {
            $(".goodsItem").click(function () {
                var id = ($(this).find(".goodsId")).html();
                localStorage.setItem("id",id)      //前面是key也就是您自己起的名字，后面的是需要的数据
                window.location.href = "/goodsJump/goodsBuy";
                /*console.log("id:"+id);
                goodsDetail = layer.open({
                    type: 2,
                    // skin: 'my_popup1',
                    area: ['95%', '90%'],
                    // anim: 2,
                    maxmin: true,
                    title: "<a>商品操作</a>",
                    content: ['/goodsJump/goodsBuy','no'],
                    //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    end: function () {
                        location.reload();
                    }
                })*/
            });
        }
    });
</script>
</body>
</html>